<template>
    <div class="filedSetting">
        <el-dialog
            title="字段设置"
            :visible.sync="dialogVisible"
            width="90%"
            :before-close="handleClose"
            :close-on-click-modal="false"
            >
            <div class="checkboxCont">
                <div class="actionBtns">
                    <el-button @click="selectAll">全选</el-button>
                    <el-button @click="clearAll">清空</el-button>
                </div>
                <el-checkbox v-for="item in checkList" :key="item.prop" v-model="item.checked">{{ item.label }}</el-checkbox>
            </div>

            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="ok">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { deepClone } from '../../utils/public';
export default {
    name: 'FiledSetting',
    props: {
        data: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            dialogVisible: false,
            checkList: []
        }
    },

    methods: {
        handleClose() {
            this.dialogVisible = false;
        },
        ok() {
            console.log(this.checkList)
            let showList = []
            for(let i = 0; i < this.checkList.length; i ++) {
                if(this.checkList[i].checked) {
                    showList.push(this.checkList[i].prop)
                }
            }
            this.$emit('change', {
                cloums: this.checkList,
                showCloums: showList
            })
            this.dialogVisible = false;

        },
        selectAll() {
            for(let i = 0 ;i < this.checkList.length; i ++) {
                this.checkList[i].checked = true;
            }
        },
        clearAll() {
            for(let i = 0 ;i < this.checkList.length; i ++) {
                this.checkList[i].checked = false;
            }
        },
        onShow(){
            this.dialogVisible = true;
        }
    },
    watch: {
        data: {
            handler(nv) {
                this.checkList = deepClone(nv);
                console.log('hsdfsdfads', this.checkList)
            },
            immediate: true,
            deep: true
        }
    }
}
</script>

<style lang="scss" scoped>
.checkboxCont{
    margin-top: -20px;
    .actionBtns{
        margin-bottom: 14px;
    }
}
::v-deep .el-checkbox{
    margin-bottom: 12px;
    font-size: 20px;
    .el-checkbox__inner{
        font-size: 18px;
    }
    .el-checkbox__label{
        font-size: 18px;
    }
}
::v-deep .el-dialog__header{
    padding: 5px 20px;
}
</style>